import React from 'react'
import "./index.css"
export default function Footer({ todoList, setTodoList }) {
  //计算已完成的个数
  const getCheckedNum = () => {
    return todoList.reduce((p, c) => c.done ? p + 1 : p, 0);
  }

  //若果用点击事件,会报错You provided a `checked` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultChecked`. Otherwise, set either `onChange` or `readOnly`.
  const checedAllHandle = (e)=>{
    console.log(e.target.checked);
    const expChecked = e.target.checked
    const newTodoList = todoList.map((item) => {
      return {...item, done: expChecked}
    })

    setTodoList(newTodoList)
  }

  const deleteAllHandle = ()=> {
    const newTodoList = todoList.filter(item => !item.done)
    setTodoList(newTodoList)
  }
 

  return (
    <div className="todo-footer">
        <label>
          <input type="checkbox" onChange = {checedAllHandle} checked = {getCheckedNum() === todoList.length && todoList.length !== 0}/>
        </label>
        <span>
          <span>已完成{getCheckedNum()}</span> / 全部{todoList.length}
        </span>
        <button onClick={deleteAllHandle} className="btn btn-danger">清除已完成任务</button>
      </div>
  )
}
